<template>
  <a-form layout="inline">
    <a-form-item>
<!--      <a-input size="large" class="search-bar"-->
<!--               @keydown.enter="search"-->
<!--               v-model:value="keyword"-->
<!--               placeholder="请输入要搜索的内容" />-->
<!--    </a-form-item>-->
<!--    <a-form-item>-->
<!--      <a-button type="primary" size="large" @click="search">-->
<!--        <SearchOutlined />-->
<!--      </a-button>-->
      <a-input-search
          v-model:value="keyword"
          placeholder="请输入要搜索的内容"
          style="width: 200px"
          @search="search"
      />
    </a-form-item>
  </a-form>
</template>

<script setup>
import {SearchOutlined} from "@ant-design/icons-vue";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {message} from "ant-design-vue";

const router = useRouter()

const keyword = ref('')

const search = () => {
  if (keyword.value === '') {
    message.warning('请输入关键词')
    return
  }
  router.push(`/blog/search?q=${keyword.value}`)
}
</script>

<style scoped>

</style>